<!DOCTYPE html>
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="/css/reset.css" rel="stylesheet" type="text/css"/>
  <link href="/css/font-awesome/css/font-awesome.css" rel="stylesheet">
  <link href="/css/modeller.css" rel="stylesheet" type="text/css"/>
  <link href="/css/shapesmith.css" rel="stylesheet" type="text/css"/>

   <script>
        var Shapesmith = Shapesmith || {};
        Shapesmith.user = '{{user}}';
        Shapesmith.design = '{{design}}';
    </script>
  
  <script data-main="/src/{{js_environment}}main.ui.js" src="/lib/require-jquery.js"></script>

  <script type="text/javascript" src="/lib/Detector.js"></script>
  <script type="text/javascript" src="/lib/three.min.js"></script>
  <script type="text/javascript" src="/lib/stats.min.js"></script>
  <script type="text/javascript" src="/lib/dat.gui.min.js"></script>
  <script type="text/javascript" src="/src/PipeGeometry.js"></script>
  <script type="text/javascript" src="/lib/csg.js"></script>
  
  <script type="text/javascript" src="/lib/IndexedDBShim.min.js"></script>
  <script type="text/javascript" src="/lib/html5slider.js"></script>
  <script type="text/javascript" src="/lib/FileSaver.js"></script>


</head>
<body>

  <div id="graphs">
    <div id="messaging"></div>
    <table id="variables"></table>
    <div class="geometry section">geometry</div>
    <div id="geometry"></div>
  </div>
  <div class="overlay-help graphs" style="display: none">
    <p><i class="icon-long-arrow-left"></i> This is the tree view</p>
    <p>Your geometry objects and variables will be shown here.</p>
    <p>To create a new variable, click on the <span class="emph">+.</span></p>
    <p>You can select, delete and copy geometry objects and navigate the boolean hierarchy
      using the tree view.<p>

  </div>

  <div id="scene"></div>
  <div id="toolbar"></div>
  <div class="overlay-help toolbar" style="display: none">
    <p><i class="icon-long-arrow-down"></i> This is the toolbar</p>
    <p>Choose primitive shapes to create, then create them
      by clicking interactively on the workplane.</p>
    <p>Create booleans by selecting 2 or more objects then clicking the icon.</p>
    <p>Save, export to STL or go to your models by clicking the icons
      on the right.</p>
  </div> 

  {{#temporary}}
  <div class="button" id="signup"><a href="/signup">Sign up</a></div>
  {{/temporary}}
  {{#signoutButton}}
  <div class="button" id="signout"><a href="/signout">Sign out</a></div>
  {{/signoutButton}}

  <div id="workplane-settings"></div>
    
  <div class="overlay-help workplane" style="display: none">
    <p>Edit the workplane <i class="icon-long-arrow-right"></i></p>
    <p>You can change the current workplane by clicking on this icon,
      then dragging the origin or changing the angle.</p>
    <p>You can also enter the values manually.</p>
  </div>

  <div class="overlay-help main" style="display: none">
    <p>Welcome to Shapesmith</p>
    <p>To help you get started:</p>
    <p>Click and drag to rotate; scroll to zoom.</p>
    <p>Undo/Redo by using the browser back/forward buttons.</p>
    <p>Click on the <span class="emph">?</span> in the toolbar to bring up this help.</p>
    <div class="got-it"><input type="button" value="Got it"/></div>
  </div>

  <input type="file" class="offscreen" id="stl-file-select-input"/>

<script>
  {{#firstTry}}
  Shapesmith.firstTry = true;
  {{/firstTry}}
</script>

{{#track}}
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-22797822-2', 'shapesmith.net');
  ga('send', 'pageview');
</script>
{{/track}}

</body>
